<template>
  <div class="app-container">
    <el-row>
      <!-- 树结构 -->
      <el-col :span="6" :xs="24">
        <div class="mainbox-left">
          <div class="box-card">
            <leftTree @treeClick="treeClick" />
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24" style="padding-left: 0px">
        <div class="mainbox">
          <div class="filter-container">
            <el-form v-show="showSearch" ref="queryForm" :model="queryParams"
                     :inline="true" label-width="68px" @submit.native.prevent>
              <el-form-item label="接口名" prop="resourceName">
                <el-input
                  v-model.trim="queryParams.resourceName"
                  :maxlength="30"
                  placeholder="请输入接口名"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-form>
            <div class="flex-1" />
            <div>
              <div class="flex-1" />
              <div style="display:flex;">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
              </div>
            </div>
          </div>
          <dt-table
            v-loading="loading"
            :table-opts="tableOpts"
            row-key="resourceId"
            :pagination-data="{
              total:total,
              queryParams:queryParams
            }"
            @pagination="getList"
          >
            <!-- <template v-slot:appIcon="scope">
              <appIcon :icon-type="scope.param.iconType" :app-icon="scope.param.appIcon" :active-color="scope.param.iconColor" style="margin:0 auto" />
            </template> -->
          </dt-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import leftTree from './components/leftTree.vue'
import { getApiByAppServicePage, setApiAccess } from '@/framework/api/interfaceMag/index.js'

export default {
  name: 'InterfaceMag',
  components: { leftTree },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        resourceName: ''
      },
      loading: false,
      // 总条数
      total: 0,
      tableOpts: {
        tableData: [],
        firstTableCol: {
          select: false
        },
        tableCol: [
          {
            prop: 'resourceName',
            label: '接口名',
            show: true
          },
          {
            prop: 'resourceUrl',
            label: 'url',
            show: true
          },
          {
            prop: 'httpMethod',
            label: '请求方式',
            show: true
          },
          {
            prop: 'resourceDesc',
            label: '接口说明',
            show: true
          },
          {
            prop: 'appName',
            label: '所属应用',
            show: true
          },
          {
            prop: 'serviceName',
            label: '所属服务',
            show: true
          },
          {
            prop: 'modularName',
            label: '模块名称',
            show: true
          },
          {
            prop: 'requiredLogin',
            label: '是否登录',
            show: true,
            type: 'switch',
            activeValue: true,
            inactiveValue: false,
            switchChange: (row, value) => { return this.statusFlag(row, 'requiredLogin') }
          },
          {
            prop: 'requiredPermission',
            label: '是否鉴权',
            show: true,
            type: 'switch',
            activeValue: true,
            inactiveValue: false,
            switchChange: (row, value) => { return this.statusFlag(row, 'requiredPermission') }
          }
        ]
      }
    }
  },
  methods: {
    getList() {
      this.loading = true
      getApiByAppServicePage(this.queryParams).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    treeClick(row) {
      this.queryParams.code = row.code || undefined
      this.queryParams.level = row.level || undefined
      this.getList()
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    handleReset() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    statusFlag(row, name) {
      const param = {
        resourceId: row.resourceId, [name]: row[name]
      }
      setApiAccess(param).then((res) => {
        this.$dtMessage({
          type: 'success',
          message: '状态修改成功'
        })
        this.getList()
      }).catch(() => {
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ceshi{
  color:var(--themeColor);
}
</style>
